{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'translator',
        eyebrowText: 'JavaScript-enabled Translation'
    } %}
        {% block title_header %}
            Translations directly imported in <em>JavaScript</em>
        {% endblock %}

        {% block sub_content %}
            Write & manage your translations like you always do. Then use them just as easily in JS.
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock filename="translations/messages+intl-icu.en.yaml" height="300px"/>
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock filename="translations/messages+intl-icu.fr.yaml" height="300px"/>
{% endblock %}

{% block demo_title %}UX Translator{% endblock %}

{% block demo_content %}

        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'hello',
        } %}
        {% endembed %}

        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'say_hello',
            parameters: {
                name: 'Fabien'
            },
        } %}
            {% block parameters %}
                <div>
                    <label for="say_hello-name" class="small opacity-50">Name</label>
                    <input id="say_hello-name" class="form-control"
                           type="text" name="name" value="Fabien"
                           data-translator-demo-block-target="parameters"
                           data-action="translator-demo-block#render"
                    >
                </div>
            {% endblock %}
        {% endembed %}

        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'invitation_title',
            parameters: {
                organizer_gender: 'Fabien',
                organizer_name: 'Clara',
            },
        } %}
            {% block parameters %}
                <div>
                    <label for="invitation_title-organizer_gender" class="small opacity-50">Gender</label>
                    <select id="invitation_title-organizer_gender" class="form-select"
                        name="organizer_gender"
                        data-translator-demo-block-target="parameters"
                        data-action="translator-demo-block#render"
                    >
                        <option value="female" selected>Female</option>
                        <option value="male">Male</option>
                        <option value="multiple">Multiple</option>
                        <option value="trans">Trans</option>
                    </select>
                </div>
                <div>
                    <label for="invitation_title-organizer_name" class="small opacity-50">Name</label>
                    <input id="invitation_title-organizer_name" class="form-control"
                           name="organizer_name"
                           value="Clara"
                           data-translator-demo-block-target="parameters"
                           data-action="translator-demo-block#render"
                    >
                </div>
            {% endblock %}
        {% endembed %}

        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'num_of_apples',
            parameters: {
                apples: 2
            },
        } %}
            {% block parameters %}
                <div>
                    <label for="num_of_apples-apples" class="small opacity-50">Count</label>
                    <input id="num_of_apples-apples" class="form-control"
                           name="apples" type="number" min="0" max="5" value="2"
                           data-translator-demo-block-target="parameters"
                           data-action="translator-demo-block#render"
                    >
                </div>
            {% endblock %}
        {% endembed %}

        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'finish_place',
            parameters: {
                place: 2
            },
        } %}
            {% block parameters %}
                <div>
                    <label for="finish_place-place" class="small opacity-50">Place</label>
                    <input id="finish_place-place" class="form-control"
                           name="place" type="number" min="0" max="5" value="1"
                           data-translator-demo-block-target="parameters"
                           data-action="translator-demo-block#render"
                    >
                </div>
            {% endblock %}
        {% endembed %}

        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'published_at',
            parameters: {
                publication_date: '2023-04-27 08:12'
            },
        } %}
            {% block parameters %}
                <div>
                    <label for="published_at-publication_date" class="small opacity-50">Date</label>
                    <input id="published_at-publication_date" class="form-control"
                           name="publication_date" type="datetime-local" value="2023-04-27 08:12"
                           data-translator-demo-block-target="parameters"
                           data-action="translator-demo-block#render"
                    >
                </div>
            {% endblock %}
        {% endembed %}

         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'progress',
            parameters: {
                progress: 42
            },
        } %}
            {% block parameters %}
                <div>
                    <label for="progress-progress" class="small opacity-50">Place</label>
                    <input id="progress-progress" class="form-range"
                           name="progress" type="range" min="0" max="100" value="42"
                           data-translator-demo-block-target="parameters"
                           data-action="translator-demo-block#render"
                    >
                </div>
            {% endblock %}
        {% endembed %}

        {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
            message: 'value_of_object',
            parameters: {
                price: 30
            },
        } %}
            {% block parameters %}
                <div>
                    <label for="value_of_object-price" class="small opacity-50">Price</label>
                    <input id="value_of_object-price" class="form-control"
                           name="price" type="number" min="1"  value="30" step="0.1"
                           data-translator-demo-block-target="parameters"
                           data-action="translator-demo-block#render"
                    >
                </div>
            {% endblock %}
        {% endembed %}

{% endblock %}
